<!--
 * @Author: your name
 * @Date: 2021-06-08 15:59:17
 * @LastEditTime: 2021-06-09 15:59:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bazai_ebook\src\components\ebook\EbookSlide.vue
-->
<template>
  <transition name="fade">
    <div class="slide-content-wrapper" v-show="menuVisible && settingVisible === 3">
      <transition name="slide-right">
        <div class="content" v-if="settingVisible === 3">
          <div class="content-page-wrapper" v-if="bookAvailable">
            <div class="content-page">
              <component :is="currentTab === 1 ? content : bookmark" />
            </div>
            <div class="content-page-tab">
                <div
                    @click="selectTab(1)"
                    class="content-page-tab-item"
                    :class="{'selected': currentTab === 1}"
                >{{$t('book.navigation')}}</div>
                <div
                @click="selectTab(2)"
                :class="{'selected': currentTab === 2}"
                class="content-page-tab-item">{{$t('book.bookmark')}}</div>
            </div>
          </div>
          <div class="content-empty" v-else>
            <ebook-loading />
          </div>
        </div>
      </transition>
      <div class="content-bg" @click="hideTitleAndMenu()"></div>
    </div>
  </transition>
</template>

<script>
import { ebookMixin } from '@/mixins/mixin'
export default {
  mixins: [ebookMixin],
  name: 'EbookSlide',
  data () {
    return {
      currentTab: 1,
      bookmark: 'EbookSlideBookmark',
      content: 'EbookSlideContents'
    }
  },
  methods: {
    selectTab (tab) {
      this.currentTab = tab
    }
  }
}
</script>

<style lang="scss" scoped>
.slide-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 300;
    display: flex;
    width: 100%;
    height: 100%;
    .content {
      flex: 0 0 85%;
      width: 85%;
      height: 100%;
      .content-page-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        .content-page {
          flex: 1;
          width: 100%;
          overflow: hidden;
        }
        .content-page-tab {
          display: flex;
          flex: 0 0 px2rem(48);
          width: 100%;
          height: px2rem(48);
          .content-page-tab-item {
            flex: 1;
            font-size: px2rem(12);
            @include center;
          }
        }
      }
      .content-empty {
        width: 100%;
        height: 100%;
        @include center;
      }
    }
    .content-bg {
      flex: 0 0 15%;
      width: 15%;
      height: 100%;
    }
}
</style>
